import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { F2Canvas } from "taro-f2";
import F2 from "@antv/f2/lib/index-all";


class ChartDoc extends Component {

  drawRadar(canvas, width, height) {
    // ⚠️ 别忘了这行
    // 为了兼容微信与支付宝的小程序，你需要通过这个命令为F2打补丁
    F2Canvas.fixF2(F2);

    const { data } = this.props;
    const chart = new F2.Chart({
      el: canvas,
      width,
      height
    });
    chart.source(data);
    chart.coord("polar", {
      transposed: true,
      innerRadius: 0.4,
      radius: 0.75
    });
    chart.axis(false);
    chart.legend({
      position: "top",
      align: "center"
    });
    chart.tooltip(false);
    chart.guide().html({
      position: ["50%", "50%"],
      html:
        '<div style="width: 100px;height: 20px;text-align: center;line-height: 20px;" id="textContent"></div>'
    });
    // 配置文本饼图
    chart.pieLabel({
      sidePadding: 75,
      label2: function label2(data) {
        return {
          fill: data.color,
          text: data.amount,
          fontWeight: 400,
          fontSize: 12
        };
      }
    });
    chart
      .interval()
      .position("const*ratio")
      .color("memo", ["#81D9E2", "#6FC1F3", "#FAA24B", "#F96470"])
      .adjust("stack");
    chart.render();

    // 绘制内阴影
    var frontPlot = chart.get("frontPlot");
    var coord = chart.get("coord"); // 获取坐标系对象
    frontPlot.addShape("sector", {
      attrs: {
        x: coord.center.x,
        y: coord.center.y,
        r: coord.circleRadius * coord.innerRadius * 1.2, // 全半径
        r0: coord.circleRadius * coord.innerRadius,
        fill: "#000",
        opacity: 0.15
      }
    });
    chart.get("canvas").draw();
  }

  render(){
    return (
      <View style="width:100%;height:250px;">
      <F2Canvas onCanvasInit={this.drawRadar.bind(this)} />
    </View>
    )
  }
}
export default ChartDoc
